//备份，将粉丝榜和周贡献榜合起来
<template>
  <div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="网游竞技" name="first"></el-tab-pane>
        <el-tab-pane label="单机热游" name="second"></el-tab-pane>
        <el-tab-pane label="娱乐天地" name="third"></el-tab-pane>
        <el-tab-pane label="手游休闲" name="fourth"></el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="activeName === 'first'">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="直播间名1"> </el-table-column>
        <el-table-column prop="nick" label="主播名"> </el-table-column>
        <el-table-column prop="totalHot" label="热度"> </el-table-column>
        <el-table-column prop="totalHot" label="查看详情">
          <template slot-scope="scope">
            <el-button @click="handleDetile(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-if="activeName === 'second'">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="直播间名2"> </el-table-column>
        <el-table-column prop="nick" label="主播名"> </el-table-column>
        <el-table-column prop="totalHot" label="热度"> </el-table-column>
      </el-table>
    </div>

    <div v-if="activeName === 'third'">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="直播间名3"> </el-table-column>
        <el-table-column prop="nick" label="主播名"> </el-table-column>
        <el-table-column prop="totalHot" label="热度"> </el-table-column>
      </el-table>
    </div>

    <div v-if="activeName === 'fourth'">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="直播间名4"> </el-table-column>
        <el-table-column prop="nick" label="主播名"> </el-table-column>
        <el-table-column prop="totalHot" label="热度"> </el-table-column>
      </el-table>
    </div>
    <el-drawer
      title="我嵌套了表格!"
      :visible.sync="table"
      direction="rtl"
      size="50%"
    >
      <el-tabs v-model="subActiveName" @tab-click="subHandleClick">
        <el-tab-pane label="周贡献榜" name="first"></el-tab-pane>
        <el-tab-pane label="粉丝榜" name="second"></el-tab-pane>
      </el-tabs>
      <div v-if="subActiveName === 'first'">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="title" label="排名"> </el-table-column>
          <el-table-column prop="nick" label="粉丝昵称"> </el-table-column>
          <el-table-column prop="nick" label="贡献值/亲密度"> </el-table-column>
        </el-table>
      </div>
      <div v-if="subActiveName === 'second'">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="title" label="排名"> </el-table-column>
          <el-table-column prop="nick" label="粉丝昵称"> </el-table-column>
          <el-table-column prop="nick" label="贡献值/亲密度"> </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      table: false,
      activeName: "first",
      subActiveName: "first",
      tableData: [
        {
          title: "1",
          nick: "2",
          totalHot: "3",
        },
      ],
      fan: {
        title: "",
        nick: "",
        totalHot: "",
      },
    };
  },
  methods: {
    //获取相应的数据
    handleClick(tab, e) {
      this.$axios
        .post("http://localhost:8083/" + this.activeName, this.activeName)
        .then((res) => {
          console.log(res);
        });
      console.log(this.activeName);
    },
    subHandleClick() {
      this.$axios
        .post("http://localhost:8083/" + this.subActiveName, this.subActiveName)
        .then((res) => {
          console.log(res);
        });
      console.log(this.subActiveName);
    },
    handleDetile(row) {
      console.log(row), (this.table = true);
    },
  },
};
</script>